<template>
    <div class="content">

        <el-tabs type="border-card" v-model="ns" @tab-click="handleNsChange">
            <el-tab-pane v-for="(item, index) in nss" :key="index" :label="item" :name="item" lazy>
                <el-row>
                    <el-form :inline="true" class="demo-form-inline">
                        <el-form-item label="数据源">
                            <!--数据源-->
                            <el-select v-model="ds" placeholder="请选择数据源" @change="handleDsChange">
                                <el-option v-for="(item,index) in dss" :key="index" :label="item.ds + ' | ' + item.dbName" :value="item.ds" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="名称空间">
                            <el-select v-model="mns" placeholder="Mapper-Namespace" @change="handleMnsChange">
                                <el-option v-for="(item,index) in mnss" :key="index" :label="item" :value="item" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="SQL标识">
                            <el-input v-model="sqlId" placeholder="SQL标识"></el-input>
                        </el-form-item>
                        <el-form-item label="追踪ID">
                            <el-input v-model="tranId" placeholder="追踪ID"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
                            <el-button type="primary" icon="el-icon-refresh-right" @click="handleClear">重置</el-button>
                        </el-form-item>
                    </el-form>
                </el-row>
                <el-table ref="multipleTable" :data="pageData.list" border fit highlight-current-row :header-row-style="() => {return 'line-height:20px';}"
                    :header-cell-style="{background: 'rgb(55, 60, 100)',color: '#FFFFFF', textAlign: 'center'}" :cell-style="{ textAlign: 'center' }" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="40"> </el-table-column>
                    <el-table-column fixed prop="ds" label="数据源"></el-table-column>
                    <el-table-column prop="dbType" label="数据库类型"></el-table-column>
                    <el-table-column prop="mns" label="名称空间"></el-table-column>
                    <el-table-column prop="sqlId" label="SQL标识"></el-table-column>
                    <el-table-column prop="tranId" label="追踪ID"></el-table-column>
                    <el-table-column prop="sqlType" label="SQL类型"></el-table-column>
                    <el-table-column prop="excSql" label="SQL语句">
                        <template slot-scope="scope">
                            <el-tooltip placement="top-start">
                                <div slot="content" class="text_warp">
                                    {{ scope.row.excSql }}
                                </div>
                                <div style="color: #000" class="text_els">
                                    {{ scope.row.excSql }}
                                </div>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column prop="isSuccess" label="是否成功">
                        <template slot-scope="scope">
                            <el-button v-if="scope.row.isSuccess === 1" type="success" icon="el-icon-check" circle size="mini"></el-button>
                            <el-button v-else-if="scope.row.isSuccess === 0" type="warning" icon="el-icon-close" circle size="mini"></el-button>
                        </template>
                    </el-table-column>
                    <el-table-column prop="returnData" label="返回值">
                        <template slot-scope="scope">
                            <el-tooltip placement="top-start">
                                <div slot="content" class="text_warp">
                                    {{ scope.row.returnData | jsonFormater }}
                                </div>
                                <div style="color: #000" class="text_els">
                                    {{ scope.row.returnData | jsonFormater}}
                                </div>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column prop="execTime" label="执行时间（ms）"></el-table-column>
                    <!-- <el-table-column prop="tableApi" label="查询api"></el-table-column> -->
                    <el-table-column prop="sqlResponseMapper" label="返回值类型"></el-table-column>
                    <el-table-column prop="errMsg" label="异常">
                        <template slot-scope="scope">
                            <el-tooltip placement="top-start">
                                <div slot="content" class="text_warp">
                                    {{ scope.row.errMsg }}
                                </div>
                                <div style="color: #000" class="text_els">
                                    {{ scope.row.errMsg }}
                                </div>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column prop="beginTime" label="开始时间" width="160"></el-table-column>
                    <el-table-column prop="endTime" label="结束时间" width="160"></el-table-column>
                </el-table>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageData.currPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageData.pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="pageData.totalCount">
                </el-pagination>
            </el-tab-pane>
        </el-tabs>

    </div>
</template>
<script>
    import { sqlLogPage } from '../../api/sql'
    import { mapperList } from '../../api/mapper'
    import { nsList } from '../../api/ns'
    import { dsList } from '../../api/ds'
    import { nsData } from '../../mixins/mixin'
    export default {
        mounted() {
            if (this.$route.query) {
                this.ns = this.$route.query.ns ? this.$route.query.ns : 'public'
            }
            this.getNsList()
            this.handleDsChange()
        },
        filters: {
            jsonFormater(value) {
                console.log('@', value)
                return value
            }
        },
        mixins: [nsData],
        data() {
            return {
                dss: [],
                mnss: [],
                loading: false,
                ds: '',
                mns: '',
                sqlId: '',
                tranId:''
            }
        },

        methods: {
            handleNsChange() {
                this.ds = ''
                this.dss = []
                this.handleDsChange()
            },
            handleDsChange() {
                this.mns = ''
                this.mnss = []
                this.getDsList()
            },
            handleMnsChange() {
                this.sqlId = ''
                this.getMnsList()
            },
            handleSelectionChange(selection) {
                this.multipleSelection = selection.map(item => item.sqlId);
            },
            handleClear() {
                this.mns = ''
                this.sqlId=''
                this.tranId=''
                this.getPageList()
            },
            getDsList() {
                dsList(this.ns).then(res => {
                    this.dss = res.data
                    if (this.ds === null || this.ds === '' || this.ds === undefined) {
                        this.ds = this.dss.length === 0 ? '' : this.dss[0].ds
                    }
                }).then(res => {
                    this.getMnsList()
                })
            },
            getMnsList() {
                mapperList(this.ns, this.ds).then(res => {
                    this.mnss = res.data
                    if (this.mns === null || this.mns === '' || this.mns === undefined) {
                        this.mns = this.mnss.length === 0 ? '' : this.mnss[0]
                    }
                }).then(res => {
                    this.getPageList()
                })
            },
            getPageList() {
                const params = {
                    ns: this.ns,
                    ds: this.ds,
                    mns: this.mns,
                    sqlId: this.sqlId,
                    tranId: this.tranId,
                    page: this.page.page,
                    limit: this.page.limit
                }
                sqlLogPage(params).then((res) => {
                    this.pageData = res.data
                })
            }
        }
    }
</script>

<style  scoped>
.content {
    margin: 20px 0px;
}
.el-table {
    margin: 20px 0px;
}
.el-row {
    margin-bottom: 20px;
    line-height: 10px;
}
.selection-button {
    margin-top: 20px;
    left: 0%;
}

.el-tooltip__popper {
    max-width: 30%;
    padding-bottom: 5px !important;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 15;
    -webkit-box-orient: vertical;
}
.el-tooltip__popper,
.el-tooltip__popper.is-dark {
    background: rgb(48, 65, 86) !important;
    color: #fff !important;
    line-height: 24px;
}
.dataTooltips {
    width: 90%;
}
.text_warp {
    display: block;
    max-width: 1000px;
    white-space: wrap;
}
.text_els {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
</style>
